<template>
  <div class="shujutree">
    <el-autocomplete
      class="inline-input"
      v-model="filterText"
      size="small"
      style="margin-bottom: 10px; width: 100%"
      :fetch-suggestions="querySearch"
      placeholder="输入关键字进行过滤"
      :trigger-on-focus="true"
      value-key="name"
      :debounce="300"
      @select="handleSelect"
    ></el-autocomplete>
    <!-- 树组件 -->
    <div class="treebox" ref="treeboxs">
      <el-tree
        :props="props"
        :load="loadNode"
        :default-expanded-keys="array"
        :highlight-current="true"
        lazy
        node-key="id"
        @node-click="handleNodeClick"
        ref="tree"
      >
        <template slot-scope="{ node, data }">
          <span style="font-size: 14px; color: #606266">
            <img
              :src="'data:image/png;base64,' + data.iconBase64"
              style="
                width: 16px;
                height: 16px;
                margin-right: 5px;
                vertical-align: bottom;
              "
            />
            {{ node.label }}</span
          >
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { getgenjiedianapi, getzijidianapi } from '@/api/monitor'
import { getKeywordListApi } from '@/api/Ledger'
export default {
  name: 'CallPoliceTreeList',

  data () {
    return {
      filterText: '',
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      array: []
    }
  },

  mounted () {},

  methods: {
    // 树节点点击
    handleNodeClick (val) {
      this.$emit('handleClick', val)
    },
    // 树节点搜索
    async querySearch (queryString, cb) {
      const res = await getKeywordListApi({ name: queryString })
      const restaurants = res.data.list
      cb(restaurants)
      // 调用 callback 返回建议列表的数据
    },
    // 搜索选择
    handleSelect (item) {
      const newarr = item.pathId.split(',')
      for (let i = 0; i < newarr.length; i++) {
        if (newarr[i]) {
          this.array.push(newarr[i])
        }
      }
      function getgaoliang (that) {
        const node = that.$refs.tree.getNode(item)
        if (node) {
          that.handleNodeClick(node.data)
          that.$refs.tree.setCurrentKey(item.id)
        } else {
          setTimeout(() => {
            getgaoliang(that)
          }, 500)
        }
      }
      getgaoliang(this)
    },
    // 设备树懒加载
    async loadNode (node, resolve) {
      this.resolve = resolve
      if (node.level === 0) {
        // 初始的级数（最顶层）
        const res = await getgenjiedianapi({ treeModel: 'NormalVirtualPowerPlantTree' })
        const ress = await getzijidianapi(res.data.list[0])
        resolve(ress.data.list) // 最顶层数据渲染为region
        this.$refs.tree.setCurrentKey(ress.data.list[0].id)
        this.array=[ress.data.list[0].id]
        return this.handleNodeClick(ress.data.list[0])
      }
      if (node.level > 0) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.shujutree {
  width: 100%;
  height: 100%;

  .danxuan {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    ::v-deep .el-radio__input {
      display: none;
    }

    .text {
      cursor: pointer;
    }

    .text:hover {
      color: #409eff;
    }
  }

  .treebox {
    height: 94%;
    overflow: auto;
  }
}
</style>
